﻿@page "/datagrid/column-template"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper

<SampleDescription>
 <p>This demo for Blazor DataGrid control shows the usage of template columns in DataGrid.</p>   
</SampleDescription>
<ActionDescription>
   <p>The DataGrid provides a way to use custom layout to display custom element value or content for each column using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template'>Template</a></code> property. You can use the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template'>Template component</a></code> of the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridColumn.html'>GridColumn</a></code> component to specify the custom content. Inside the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template'>Template</a></code>, you can access the data using the implicit named parameter <strong>Context</strong>.</p>
   <p>In this demo, we have displayed <strong>Employee Image</strong> column with Employee Photo using column template.</p>
   <p>More information on the Templates feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/templates/'>documentation section</a>.</p>
</ActionDescription>

<style>
    .image img {
        height: 55px;
        width: 55px;
        border-radius: 50px;
        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
    }
</style>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">

            <SfGrid DataSource="@GridData" Height="359">
                <GridColumns>
                    <GridColumn HeaderText="Employee Image" Width="120">
                        <Template>
                            @{
                                var EmployeeInfo = (context as Employee);
                                <div class="image">
                                    <img src="@UriHelper.ToAbsoluteUri($"images/data-grid/{EmployeeInfo.EmployeeID}.png")" alt="@EmployeeInfo.EmployeeID" />
                                </div>
                            }
                        </Template>
                    </GridColumn>
                    <GridColumn Field=@nameof(Employee.EmployeeID) HeaderText="Employee ID" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(Employee.FirstName) HeaderText="Name" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(Employee.Title) HeaderText="Title" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(Employee.HireDate) HeaderText="Hire Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  Width="160"></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = Employee.GetAllRecords();
    }
}
